<template>
    <div class="navTab-menu" style="display: flex">
        <div class="ul-parent" id="ulParent">
            <ul id="ulParentUl">
                <li v-for="(item) in navTabList" style="visibility: hidden" @click="routerChangeTab(item.index)" v-if="item!=null && item.show"  v-bind:key="item.id" v-bind:class="{active:item.active}">
                    <router-link v-bind:to="item.href">
                        <a href="#" aria-controls="tab_Desktop" role="tab" data-toggle="tab"></a>
                        <a href="JavaScript:void(0);">
                            <i class="icon-home"></i>
                            <span>{{item.name}}</span>
                            <i class="fa fa-close" v-if="!item.can_not_delete"  aria-hidden="true" @click.self.stop="removeWorkTab(item.index)"></i>
                        </a>
                    </router-link>
                </li>
            </ul>
            <ul id="line">
                <li v-for="(item) in navTabList" @click="routerChangeTab(item.index)" v-if="item!=null && item.show"  v-bind:key="item.id" v-bind:class="{active:item.active}">
                    <router-link v-bind:to="item.href">
                        <a href="#" aria-controls="tab_Desktop" role="tab" data-toggle="tab"></a>
                        <a href="JavaScript:void(0);">
                            <i class="icon-home"></i>
                            <span>{{item.name}}</span>
                            <i class="fa fa-close" v-if="!item.can_not_delete"  aria-hidden="true" @click.self.stop="removeWorkTab(item.index)"></i>
                        </a>
                    </router-link>
                </li>
            </ul>
        </div>
        <ul class="left-right">
            <i class="fa fa-chevron-left" aria-hidden="true" @click="scrollLeft()" @mousedown="scrollLeftInterval()" @mouseup="scrollLeftIntervalStop()"></i>
            <i class="fa fa-chevron-right" aria-hidden="true" @click="scrollRight()" @mousedown="scrollRightInterval()" @mouseup="scrollRightIntervalStop()"></i>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'navTab',
        data() {
            return {
                scrollLeftIntervalVar: {},
                scrollRightIntervalVar: {},
                leftRightShow: false,
                index: "",
                navTabList: this.$nav_.navTabList
            }
        },
        created: function () {
            this.$nextTick(function () {
                this.leftRightShow = $('#ulParent').width() < $('#ulParentUl li').width();
            });
        },
        updated: function () {
            this.$nextTick(function () {
                this.leftRightShow = $('#ulParent').width() < $('#ulParentUl li').width();
            });
        },
        methods: {
            scrollLeft: function () {
                $("#ulParent").scrollLeft($("#ulParent").scrollLeft() - 60);
                $("#line").scrollLeft($("#line").scrollLeft() - 60);
            },
            scrollRight: function () {
                $("#ulParent").scrollLeft($("#ulParent").scrollLeft() + 60);
                $("#line").scrollLeft($("#line").scrollLeft() + 60);
            },
            scrollLeftInterval: function () {
                this.scrollLeftIntervalVar = setInterval(function () {
                    $("#ulParent").scrollLeft($("#ulParent").scrollLeft() - 60);
                    $("#line").scrollLeft($("#line").scrollLeft() - 60);
                }, 150);
            },
            scrollRightInterval: function () {
                this.scrollRightIntervalVar = setInterval(function () {
                    $("#ulParent").scrollLeft($("#ulParent").scrollLeft() + 60);
                    $("#line").scrollLeft($("#line").scrollLeft() + 60);
                }, 150);
            },
            scrollLeftIntervalStop: function () {
                clearInterval(this.scrollLeftIntervalVar);
            },
            scrollRightIntervalStop: function () {
                clearInterval(this.scrollRightIntervalVar);
            },
            routerChangeTab: function (index) {// 选中索引项，并且改变路由，当选择的navTab的选项,点击时就触发这个方法，刷新激活这个工作
                this.$nav_.routerChangeTab(this, index);
            },
            removeWorkTab: function (index) {// 移除路由
                this.$nav_.removeWorkTab(this, index);
            },
        },
    }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .navTab-menu {
        height: 46px;
        width: 100%;
        background-color: #eeeeee;
        z-index: 1;
        position: absolute;
        margin-top: 46px;
        border-color: #c5d0dc;
        margin-bottom: 0;
        margin-left: 0;
        display: block;
        border-bottom: 1px solid #dddddd;
    }
    .ul-parent {
        width: 100%;
        height: 46px;
        padding-left: 20px;
        #ulParentUl {
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            height: 46px;
            li {
                white-space: normal;
                word-wrap: break-word;
                word-break: break-all;
                box-sizing: border-box;
                display: inline-block;
            }
        }
        #line {
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            height: 46px;
            margin-top: -45px;
            li {
                white-space: normal;
                word-wrap: break-word;
                word-break: break-all;
                box-sizing: border-box;
                display: inline-block;
                border-bottom: 12px solid #dddddd;
                height: 45px;
                .active{
                    height: 46px !important;
                    border-bottom: 1px solid #ffffff !important;
                }
            }
        }
    }
    #ulParentUl::-webkit-scrollbar {
        display: none
    }
    #line::-webkit-scrollbar {
        display: none
    }

    .left-right {
        line-height: 6px;
        margin-right: 20px;
        display: flex;
        vertical-align: middle;
    }

    .left-right > i {
        flex: 1;
        float: right;
        padding: 15px 5px;
        line-height: 3px;
        cursor: pointer;
        vertical-align: middle;
        align-self: center;
        color: #cccccc;
        margin-left: 0px;
    }

    .left-right > i:hover {
        color: #ffffff;
        background-color: #9F9F9F66;
    }

    .fa-times:hover {
        color: red;
    }

    .navTab-menu ul > li.active {
        border: 0px;
        border-top: 2px solid #f58006;
        padding: 11px 4px 9px 7px;
        background-color: #ffffff;
        border-bottom: 1px solid #dddddd !important;
    }

    .navTab-menu ul > li {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        border: 1px solid #ddd;
        border-bottom: 1px solid #ffffff;
        text-align: -webkit-match-parent;
        -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.2);
        border-radius: 8px 8px 0 0;
        background-color: #F5F5F5;
        cursor: pointer;
        font-size: 12px;
        margin-top: 11px;
        margin-right: 20px;
        padding: 11px 4px 9px 7px
    }

    .deleteImg {
        height: 14px;
        width: 14px;
        position: absolute;
        margin-left: 16px;
        margin-top: -12px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: right 0px top 0px;
        background-size: 12px 12px;
        cursor: pointer;
    }

    .deleteImg:hover {
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: right 0px top 0px;
        background-size: 14px 14px;
    }

    .navTab-menu ul > li.active a {
        color: #f58006 !important;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

</style>
